<template>
  <div class="workbench">
    <div class="plan">
      <Card
        :title="cardTitle.today"
        :tasks="dayplans"
        class="today"
        @refreshData="refreshData"
        :add="true"
        :lr="'l'"
      />
      <Card
        :title="cardTitle.yesterday"
        :tasks="yesterdayplans"
        @refreshData="refreshData"
        class="yesterday"
        :lr="'l'"
      />
    </div>
    <div class="week-plan-warning">
      <Card
        :title="cardTitle.week"
        :add="true"
        :tasks="weekplans"
        @refreshData="refreshData"
        class="week-plan"
        :lr="'r'"
      />
      <Card
        :title="cardTitle.postpone"
        :tasks="currentMonthPostpone"
        class="month-plan"
        @refreshData="refreshData"
        :lr="'r'"
      />
      <Card
        :title="cardTitle.overdue"
        @refreshData="refreshData"
        :tasks="overdueplans"
        class="warning"
        :lr="'r'"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Card from './components/card'
import api from '@/api'
import { useStore } from 'vuex'
import { cardTitle } from '@/utils/const/constant.js'
// import { cloneDeep } from 'lodash'
const store = useStore()
const plans = ref({})
// 今天计划
const dayplans = ref([])
// 昨天计划
const yesterdayplans = ref([])
// 本周计划
const weekplans = ref([])
// 延期计划
const currentMonthPostpone = ref([])
// 逾期计划
const overdueplans = ref([])

const refreshData = () => {
  console.log('刷新数据')
  getPlans()
}
const getPlans = () => {
  api
    .getPlans({
      createTime: '2022-07-14',
      userId: store.getters.userInfo.userId
    })
    .then((res) => {
      console.log('获取各种计划', res)
      if (res.code === 200) {
        plans.value = res.data
        dayplans.value = plans.value.dayplan[0]?.tasks
        yesterdayplans.value = plans.value.yesterdayplan[0]?.tasks
        weekplans.value = plans.value.weekplan[0]?.tasks
        const postpone = []
        plans.value.currentMonthPostpone.forEach((el) => {
          postpone.push(...el)
        })
        currentMonthPostpone.value = postpone
        // 逾期计划
        const overdues = []
        plans.value.overdueplan.forEach((el) => {
          overdues.push(...el)
        })

        overdueplans.value = overdues
      }
    })
}

getPlans()
</script>

<style lang="scss" scoped>
.workbench {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 130px);

  .plan {
    width: 55%;

    .today,
    .yesterday {
      height: 49%;
      box-shadow: 0px 0px 3px 3px rgb(230, 230, 230);
      border-radius: 6px;
      border: #e4e7ed;
      overflow-y: scroll;
    }
    .yesterday {
      margin-top: 2%;
    }
  }
  .week-plan-warning {
    width: 44%;
    margin-left: 1%;

    .warning,
    .week-plan,
    .month-plan {
      box-shadow: 0px 0px 3px 3px rgb(230, 230, 230);
      border-radius: 6px;
      border: #e4e7ed;
      overflow-y: scroll;
    }
    .warning {
      height: 23%;
      margin-top: 2.6%;
    }
    .week-plan {
      height: 49%;
    }
    .month-plan {
      height: 23%;
      margin-top: 2.6%;
    }
  }
}
</style>
